import React from 'react';

const Reports: React.FC = () => {
  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-800">绩效报表</h1>
        <p className="text-gray-600 mt-2">绩效数据统计与分析报表</p>
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {/* 报表统计卡片 */}
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">报表总数</p>
              <p className="text-2xl font-bold text-gray-800">156</p>
            </div>
            <div className="p-3 bg-blue-100 rounded-full">
              <i className="fa fa-file-chart-column text-blue-600 text-xl"></i>
            </div>
          </div>
        </div>
        
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">本月生成</p>
              <p className="text-2xl font-bold text-green-600">23</p>
            </div>
            <div className="p-3 bg-green-100 rounded-full">
              <i className="fa fa-chart-bar text-green-600 text-xl"></i>
            </div>
          </div>
        </div>
        
        <div className="bg-white rounded-lg shadow p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">平均得分</p>
              <p className="text-2xl font-bold text-purple-600">87.2</p>
            </div>
            <div className="p-3 bg-purple-100 rounded-full">
              <i className="fa fa-chart-line text-purple-600 text-xl"></i>
            </div>
          </div>
        </div>
      </div>
      
      {/* 报表类型选择 */}
      <div className="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div className="bg-white rounded-lg shadow p-6 cursor-pointer hover:shadow-lg transition-shadow">
          <div className="text-center">
            <div className="p-4 bg-blue-100 rounded-full inline-block mb-4">
              <i className="fa fa-user text-blue-600 text-2xl"></i>
            </div>
            <h3 className="text-lg font-semibold text-gray-800 mb-2">个人绩效报表</h3>
            <p className="text-sm text-gray-600">员工个人绩效详细分析</p>
          </div>
        </div>
        
        <div className="bg-white rounded-lg shadow p-6 cursor-pointer hover:shadow-lg transition-shadow">
          <div className="text-center">
            <div className="p-4 bg-green-100 rounded-full inline-block mb-4">
              <i className="fa fa-users text-green-600 text-2xl"></i>
            </div>
            <h3 className="text-lg font-semibold text-gray-800 mb-2">团队绩效报表</h3>
            <p className="text-sm text-gray-600">团队整体绩效统计</p>
          </div>
        </div>
        
        <div className="bg-white rounded-lg shadow p-6 cursor-pointer hover:shadow-lg transition-shadow">
          <div className="text-center">
            <div className="p-4 bg-purple-100 rounded-full inline-block mb-4">
              <i className="fa fa-building text-purple-600 text-2xl"></i>
            </div>
            <h3 className="text-lg font-semibold text-gray-800 mb-2">部门绩效报表</h3>
            <p className="text-sm text-gray-600">部门绩效对比分析</p>
          </div>
        </div>
        
        <div className="bg-white rounded-lg shadow p-6 cursor-pointer hover:shadow-lg transition-shadow">
          <div className="text-center">
            <div className="p-4 bg-orange-100 rounded-full inline-block mb-4">
              <i className="fa fa-chart-pie text-orange-600 text-2xl"></i>
            </div>
            <h3 className="text-lg font-semibold text-gray-800 mb-2">KPI完成率报表</h3>
            <p className="text-sm text-gray-600">KPI指标完成情况</p>
          </div>
        </div>
      </div>
      
      {/* 最近报表 */}
      <div className="mt-8 bg-white rounded-lg shadow">
        <div className="p-6 border-b">
          <h2 className="text-lg font-semibold text-gray-800">最近报表</h2>
        </div>
        <div className="p-6">
          <div className="space-y-4">
            <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
              <div className="flex items-center space-x-4">
                <div className="p-3 bg-blue-100 rounded-lg">
                  <i className="fa fa-file-pdf text-blue-600 text-xl"></i>
                </div>
                <div>
                  <h4 className="font-medium text-gray-800">2024年第一季度绩效报告</h4>
                  <p className="text-sm text-gray-600">生成时间: 2024-04-01</p>
                </div>
              </div>
              <button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                下载
              </button>
            </div>
            
            <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
              <div className="flex items-center space-x-4">
                <div className="p-3 bg-green-100 rounded-lg">
                  <i className="fa fa-file-excel text-green-600 text-xl"></i>
                </div>
                <div>
                  <h4 className="font-medium text-gray-800">3月份团队绩效分析</h4>
                  <p className="text-sm text-gray-600">生成时间: 2024-04-01</p>
                </div>
              </div>
              <button className="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                下载
              </button>
            </div>
            
            <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
              <div className="flex items-center space-x-4">
                <div className="p-3 bg-purple-100 rounded-lg">
                  <i className="fa fa-file-chart-line text-purple-600 text-xl"></i>
                </div>
                <div>
                  <h4 className="font-medium text-gray-800">KPI完成率趋势分析</h4>
                  <p className="text-sm text-gray-600">生成时间: 2024-03-28</p>
                </div>
              </div>
              <button className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
                下载
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Reports;